<template>
  <div class="article">
    <van-card v-for="article in articles" :key="article.id" :desc="article.articleDesc" :title="article.title" :thumb="article.thumb" @click="card(article.articleInfoId)">
      <template #tags>
        <van-tag plain type="primary" v-for="tag in article.tagNames" :key="tag.id">{{ tag.tagName }}</van-tag>
      </template>
      <template #footer>
        <!-- 文章发布时间和作者 -->
        <van-row class="time-author">
          <van-col span="10">发布时间：{{ article.releaseData }}</van-col>
          <van-col span="6">评论数量 {{ article.commentNum }}</van-col>
          <van-col span="8" class="author">作者：{{ getAuthor(article.author) }}</van-col>
        </van-row>
      </template>
    </van-card>
  </div>
</template>

<script>
export default {
  name: 'ArticleComponent.vue',
  props: {
    articles: {
      required: true
    },
    type: Number
  },
  data() {
    return {}
  },
  methods: {
    getAuthor(author) {
      if (Object.prototype.toString.call(author) === '[object String]') {
        if (author.length > 4) {
          return author.slice(0, 4) + '...'
        }
      }
      return author
    },
    card(id) {
      if (this.type === 0) {
        this.$router.push('/info/' + id)
      } else if (this.type === 1) {
        this.$router.push('/draftInfo/' + id)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.van-card__title {
  max-height: 100px;
  font-weight: 400;
  line-height: 40px;
  font-size: x-large;
}

.van-card {
  position: relative;
  box-sizing: border-box;
  padding: 8px 16px;
  color: #323233;
  font-size: 12px;
  background-color: #ffffff;
}
</style>
